<template>
    <div class="silk-road-news-top6">
        <div v-for="(item, index) in silkRoadNewsTop6Arr" :key="index" @click="viewDetails(item.id)" class="top6-item">
            <div class="item--left"><span :class="index < 3 ? 'red' : ''">{{ index }}</span></div>
            <div class="item--right">
                <div class="item--right--title">{{ item.title }}</div>
                <div class="item--right--content">{{ item.content }}</div>
                <div class="item--right--time">{{ item.time }}</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "SilkRoadNewsTop6",
        data() {
            return {
                silkRoadNewsTop6Arr: []
            }
        },
        beforeMount() {
            this.silkRoadNewsTop6Arr = [
                {
                    id: 0,
                    title: "柬埔寨 金边",
                    content: "“一带一路”上的水泥大王：进军柬埔寨，鄂企寻求海外突围",
                    time: "2018-10-23 09：45"
                },
                {
                    id: 1,
                    title: "柬埔寨 金边",
                    content: "“一带一路”上的水泥大王：进军柬埔寨，鄂企寻求海外突围",
                    time: "2018-10-23 09：45"
                },
                {
                    id: 2,
                    title: "柬埔寨 金边",
                    content: "“一带一路”上的水泥大王：进军柬埔寨，鄂企寻求海外突围",
                    time: "2018-10-23 09：45"
                },
                {
                    id: 3,
                    title: "柬埔寨 金边",
                    content: "“一带一路”上的水泥大王：进军柬埔寨，鄂企寻求海外突围",
                    time: "2018-10-23 09：45"
                },
                {
                    id: 4,
                    title: "柬埔寨 金边",
                    content: "“一带一路”上的水泥大王：进军柬埔寨，鄂企寻求海外突围",
                    time: "2018-10-23 09：45"
                },
                {
                    id: 5,
                    title: "柬埔寨 金边",
                    content: "“一带一路”上的水泥大王：进军柬埔寨，鄂企寻求海外突围",
                    time: "2018-10-23 09：45"
                }
            ]
        },
        methods: {
            viewDetails(id) {
                console.log(id)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .silk-road-news-top6 {
        padding: 20px;
        .top6-item {
            display: flex;
            line-height: 40px;
            border-bottom: 1px solid #99f;
            .item--left {
                text-align: center;
                span {
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    line-height: 20px;
                    border-radius: 4px;
                    background: #99f;
                }
                span.red {
                    background: #f99;
                }
            }
            .item--right {
                .item--right--title {

                }
                .item--right--content {

                }
                .item--right--time {

                }
            }
        }
        .top6-item:last-child {
            border: 0;
        }
    }
</style>
